import React from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import { colors, sizes } from 'bee/themes';
import { px2dp } from 'bee/utils/px2dp';

export const InputWithTitle = ({ title, value, onValueChange, unit }) => (
  <View style={styles.inputwithTitle}>
    {title && <Text style={styles.dutyText}>{title}</Text>}
    <View style={styles.inputAndUnit}>
      <TextInput
        placeholder="请输入"
        underlineColorAndroid="transparent"
        style={styles.inputWithUnit}
        value={value}
      />
      <Text style={styles.unit}>{unit}</Text>
    </View>
  </View>
);

export const NormalText = ({ text }) => (
  <Text style={styles.dutyText}>{text}</Text>
);

export const SubText = ({ text }) => <Text style={styles.subText}>{text}</Text>;

const styles = StyleSheet.create({
  // inputWithTitle
  inputwithTitle: {
    width: '40%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    // backgroundColor: '#faa',
    alignItems: 'center',
  },
  inputAndUnit: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    // backgroundColor: '#faf',
    alignItems: 'center',
    flex: 1,
  },
  inputWithUnit: {
    padding: 0,
    // backgroundColor: '#faa',
    flex: 1,
    textAlign: 'right',
  },
  unit: {
    fontSize: sizes.f2,
    color: colors[1001],
    // backgroundColor: '#afd',
    marginLeft: px2dp(10),
  },

  // NormalText
  dutyText: {
    fontSize: sizes.f1,
    lineHeight: px2dp(30),
    color: colors[1101],
  },

  // SubText
  dutySubText: {
    fontSize: sizes.f0,
    lineHeight: px2dp(30),
    color: colors[1103],
  },
});
